<div class="icon empty-m color-black">
    <div>
        <button class="icon-add--text kss-add--off">toggle to class: .icon-add</button>
    </div>
    <i class="icon-default fa fa-plus kss-action--add"></i>
</div>

<script type="text/javascript" charset="utf-8"">
 document.addEventListener("DOMContentLoaded", () => {
     const $actionIconAdd = $(".kss-action--add");

     $(".icon-add--text").on("click", function (e) {
         e.preventDefault();
         e.stopImmediatePropagation();
         if ($(this).hasClass("kss-add-off")) {
            $(this).html("toggle to class .icon-add");
         } else {
            $(this).html("toggle to class .icon-default");
         }

         $(this).toggleClass("kss-add-off");
         $(this).toggleClass("kss-add-on");

         $actionIconAdd.toggleClass("icon-add");
         $actionIconAdd.toggleClass("icon-default");
     });

 });
</script>
